import React from "react";
import { QueryClient, QueryClientProvider } from 'react-query';
import { Hydrate } from 'react-query/hydration';
import Header from "next/head";

// https://github.com/FortAwesome/react-fontawesome/issues/284
import { config, dom } from "@fortawesome/fontawesome-svg-core";


import "../styles/globals.css";

config.autoAddCss = false;

function MyApp({ Component, pageProps }) {
    const queryClientRef = React.useRef()
    if (!queryClientRef.current) {
        queryClientRef.current = new QueryClient()
    }
    return (
        <QueryClientProvider client={queryClientRef.current}>
            <Hydrate state={pageProps.dehydratedState}>
                <Header>
                    <link rel="icon" href="/favicon.ico" />
                    <style>{dom.css()}</style>
                    <meta name="viewport" content="width=device-width, initial-scale=1" />
                    <script
                        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
                        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
                        crossOrigin="anonymous"
                    ></script>
                </Header>
                <Component {...pageProps} />
            </Hydrate>
        </QueryClientProvider>
    );
}

export default MyApp;
